<template>
  <img
    :class="['icon', activeName === name ? 'active' : '']"
    :src="imageMap[icon]"
    @click="handleClick"
  />
</template>

<script setup lang="ts">
import {
  useElementEditStore,
  type EditElementInterface,
  type NameType,
} from '@/stores/elementEdit';
import { MapTile, imageMap, cssWidthHeight } from '@/constants';

const { editElement, icon, name } = defineProps<{
  activeName?: NameType;
  icon: MapTile;
  name: NameType;
  editElement: EditElementInterface;
}>();

let { setCurrentSelectedElement } = useElementEditStore();
const emit = defineEmits(['changeActiveName']);

const handleClick = () => {
  setCurrentSelectedElement(editElement);
  emit('changeActiveName');
};
</script>

<style scoped>
.icon {
  width: v-bind(cssWidthHeight);
  height: v-bind(cssWidthHeight);
  margin-right: 20px;

  &.active {
    border: 1px solid red;
  }
}
</style>
